<template>
    <div class="bigD-cont">
        <i class="bigD-cont-lt"></i>
        <i class="bigD-cont-rt"></i>
        <i class="bigD-cont-lb"></i>
        <i class="bigD-cont-rb"></i>
        <span class="bigD-cont-title">报名年度统计</span>
        <div class="bigD-cont-echart">
            <IEcharts :option="line"></IEcharts>
        </div>
        <ul class="yyfx-ul">
          <li class="yyfx-ul-li">
            <i class="yyfx-ul-li-icon on"><img src="../../static/images/yyfx-bg.png" width="100%"></i><span class="yyfx-ul-li-num" id="homeIco-3"></span>{{regCount.pxnl}}
          </li>
          <li class="yyfx-ul-li">
            <i class="yyfx-ul-li-icon on"><img src="../../static/images/yyfx-bg.png" width="100%"></i><span class="yyfx-ul-li-num" id="homeIco-2"></span>{{regCount.average}}
          </li>
          <li class="num-ms">培训能力</li>
          <li class="num-ms">平均报名数 </li>
        </ul>
    </div>
</template>

<script>
import IEcharts from "vue-echarts-v3";
export default {
  name: "registerStatistics",
  props: ["regCount"],
  components: { IEcharts },
  data() {
    return {
      line: {
        tooltip: {
          trigger: "axis"
          // formatter: "{a} 年 <br/>{b} 月 : {c} 人"
        },
        legend: {
          left: "right",
          data: this.regCount.yearChart.keyList,
          textStyle: {
            color: "#fefeff"
          }
        },
        xAxis: {
          type: "category",
          data: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
          axisTick: {
            //刻度线
            show: false
          },
          axisLabel: {
            color: "#fefeff"
          },
          axisLine: {
            onZero: true,
            lineStyle: {
              color: "#545d6f"
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: "10",
              color: "#162741",
              opacity: "0.8"
            }
          }
        },
        grid: {
          left: "3%",
          top: "20%",
          right: "4%",
          bottom: "1%",
          containLabel: true
        },
        yAxis: {
          type: "value",
          axisTick: {
            //刻度线
            show: false
          },
          axisLabel: {
            color: "#fefeff",
            margin: 15
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              width: "1",
              color: "#162741",
              opacity: "0.8"
            }
          }
        },
        series: [
          {
            name: this.regCount.yearChart.keyList[0],
            type: "line",
            smooth: true,
            data: this.regCount.monthChart["2015"],
            itemStyle: {
              color: "#2196f3"
            }
          },
          {
            name: this.regCount.yearChart.keyList[1],
            type: "line",
            smooth: true,
            data: this.regCount.monthChart["2016"],
            itemStyle: {
              color: "#21f3a1"
            }
          },
          {
            name: this.regCount.yearChart.keyList[2],
            type: "line",
            smooth: true,
            data: this.regCount.monthChart["2017"],
            itemStyle: {
              color: "#21f0f3"
            }
          }
        ]
      }
    };
  }
};
</script>

<style scoped>
.bigD-cont-echart {
  height: 225px;
  margin-top: 13px;
}
.yyfx-ul-li-icon {
  width: 140px;
  height: 140px;
  margin-top: -70px;
  margin-left: -70px;
}
.yyfx-ul-li {
  line-height: 24px;
  font-size: 30px;
  margin: 29px 0 10px 0;
  font-family: fontNUm;
}
.num-ms {
  width: 50%;
  float: left;
  text-align: center;
  color: #fff;
  padding: 8px 0 0 0;
  font-size: 18px;
  font-weight: bold;
}
</style>


